/*
 * @Date: 2024-08-20 16:56:43
 * @Auth: 873768511@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2025-09-16 11:42:02
 * @FilePath: \corpus\src\pages\catalogue\list\index.tsx
 */
import Category from '@/components/Category';
import { PageContainer } from '@ant-design/pro-components';
import { useLayoutEffect, useRef, useState } from 'react';
import ProTable from './component/ProTable';
import { default as Container, default as hooks } from './hooks';
import styles from './index.less';
function Index() {
  const { total } = hooks.useContainer();
  const refContent = useRef<any>();

  const [height, setHeight] = useState(refContent?.current?.clientHeight);
  useLayoutEffect(() => {
    if (total !== 0) {
      setHeight(refContent.current.clientHeight);
    }
  }, [total]);
  return (
    <PageContainer className={styles.detailWrap}>
      <div style={{ display: 'flex' }}>
        <div className={styles.wrapperLeft}>
          <Category height={height} />
        </div>
        <div ref={refContent} className={styles.wrapperRight}>
          <ProTable />
        </div>
      </div>
    </PageContainer>
  );
}

export default () => {
  return (
    <Container.Provider>
      <Index />
    </Container.Provider>
  );
};
